<template>
    <div class="login">
        <div class="header">
            <div class="wrapper">
				<div class="logo">
					<img src="@/assets/login_logo.png" alt="">
				</div>
                <div class="text">
                    <p>Online teaching platform</p>
                </div>
                <div class="clear"></div>
            </div>
        </div>
        
        <transition name="el-fade-in" mode="out-in">
            <router-view/>
        </transition>

        <div class="copyright">
            <p>2018-2019 &#169 Zenith education technology (Beijing) co. LTD</p>
        </div>
    </div>
</template>

<script>
    import LoginForm from '@/components/LoginForm'

    export default {
        name: 'Login',
        components: {
            LoginForm
        }
    }
</script>

<style>
    #app {height: 100%;}
    .login .el-input__inner {border-radius: 24px; height: 48px; font-size: 16px; padding: 0 20px;}
    .login .el-form-item {margin: 30px auto 0;}
    .login .el-button {width:358px; height:48px; font-size: 20px; background: linear-gradient(90deg, #3B9FFC 0%, #3C6DD7 100%); border-radius:24px;}
</style>

<style scoped>
    .login {width: 100%; height: 100%; min-height: 800px; background: url('../assets/login_bg.jpg') no-repeat center; background-size: cover; position: relative;}
    .logo {float: left; margin-top: 35px;}
    .text {float: right; color: #fff; font-size: 32px; margin-top: 62px;}
    .copyright {text-align: center; font-size: 20px; color: #fff; position: absolute; bottom: 58px; width: 100%;}
</style>
